<template>
    <view>
        <u-notice-bar
            mode="vertical"
            duration="3000"
            :no-list-hidden="true"
            speed="200"
            :list="list"
            :bg-color="bgColor"
            :color="color"
            @click="showMore"
            padding="18rpx 30rpx"
            :more-icon="true"
        ></u-notice-bar>
        <u-modal :title="title" v-model="showModal" :content="content"></u-modal>
    </view>
</template>

<script>
export default {
    props: {
        bgColor: {
            type: [String, Object],
            default: '#ffffff'
        },
        color: {
            type: [String, Object],
            default: '#666666'
        }
    },
    data() {
        return {
            list: [],
            msgContent: [],
            content: '',
            title: '',
            index: 0,
            showModal: false
        };
    },
    onReady() {
        this.getMsgList();
    },
    methods: {
        showMore(index) {
            this.showModal = true;
            this.content = this.msgContent[index];
            this.title = this.list[index];
        },
        getMsgList() {
            let _this = this;
            _this.$http
                .post('/news/index/msg', {})
                .then(res => {
                    if (200 == res.code) {
                        res.data.list.forEach(v => {
                            _this.list.push(v.title);
                            _this.msgContent.push(v.content);
                        });
                    }
                })
                .catch(err => {});
        }
    }
};
</script>

<style></style>
